import React, { Component } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import MyBtn from '../components/MyBtn'

import { add, changeMsg, changeWord } from './reducers/data'
import { getTestAsync, getListAsync, clsList } from './reducers/source'


export const styles = {
  box: {
    border: '1px solid #ddd',
    borderRadius: 15,
    padding: 15,
    margin: 15,
  }
}

const Index = () => {
  const { counter, msg, word } = useSelector(state => state.data)
  const { test, list } = useSelector(state => state.source)
  const dispatch = useDispatch()
  return (
    <div>
      <div style={styles.box}>
        <h3>reduxjs / toolkit</h3>
        <h4>counter = {counter}</h4>
        <h4>msg = {msg}</h4>
        <h4>word = {word}</h4>
        <h4>test = {test}</h4>
        <hr />
        <div>
          <MyBtn text='counter add' onClick={() => dispatch(add())}></MyBtn>
          <MyBtn text='change msg' onClick={() => dispatch(changeMsg('如果苦笑比眼泪更真，但愿笑像一滴滴吻'))}></MyBtn>
        </div>
        <br />
        <div>
          <input type='text' value={word} onChange={(e) => dispatch(changeWord(e.target.value))} />
        </div>
        <br />
        <div>
          <MyBtn text='get test' onClick={() => dispatch(getTestAsync())}></MyBtn>
          <MyBtn text='get list' onClick={() => dispatch(getListAsync())}></MyBtn>
          <MyBtn text='cls list' onClick={() => dispatch(clsList([]))}></MyBtn>
        </div>
        <div>
          <ul>
            {
              list.map(item => {
                return (
                  <li key={item._id}>{item.name}</li>
                )
              })
            }
          </ul>
        </div>
      </div>
    </div>
  )
}
export default Index
